<template>
	<view class="certificate">
		<dwu-navbar title="添加证书"></dwu-navbar>
		<view class="form">
			<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="auto">
				<u-form-item label="证书颁发机构" prop="org_name" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" v-model="form.org_name" border="none"
						placeholder="请输入证书颁发机构"></u--input>
				</u-form-item>
				<u-form-item label="证书编号" prop="org_sn" borderBottom>
					<text class="must">*</text>
					<u--input inputAlign="right" v-model="form.org_sn" border="none" placeholder="请输入证书编号"></u--input>
				</u-form-item>
				<u-form-item label="颁发日期" prop="lssuetime" borderBottom>
					<text class="must">*</text>
					<dwu-datetime-picker placeholder="请选择颁发日期" :defaultVal="form.lssuetime"
						@onconfirm="confirmLssuetime"></dwu-datetime-picker>
				</u-form-item>
				<u-form-item label="有效截止日期" prop="cutofftime" borderBottom>
					<text class="must">*</text>
					<dwu-datetime-picker placeholder="请选择有效截止日期" :defaultVal="form.cutofftime"
						@onconfirm="confirmCutofftime"></dwu-datetime-picker>
				</u-form-item>
				<u-form-item label="复审日期" prop="reexaminetime">
					<dwu-datetime-picker placeholder="请选择复审日期" :defaultVal="form.reexaminetime"
						@onconfirm="confirmReexaminetime"></dwu-datetime-picker>
				</u-form-item>
			</u--form>
		</view>
		<view class="type">
			<view class="title">
				证书类型<text class="must">*</text>
			</view>
			<view class="type-list">
				<view class="type-item" :class="type == 1 ? 'active' : ''" @click="type = 1">
					电工证
				</view>
				<view class="type-item" :class="type == 2 ? 'active' : ''" @click="type = 2">
					焊工证
				</view>
				<view class="type-item" :class="type == 3 ? 'active' : ''" @click="type = 3">
					安全员
				</view>
				<view class="type-item" :class="type == 4 ? 'active' : ''" @click="type = 4">
					施工员
				</view>
				<view class="type-item" :class="type == 5 ? 'active' : ''" @click="type = 5">
					其他
				</view>
			</view>
		</view>
		<view class="type">
			<view class="title">
				证书照片(正反面)<text class="must">*</text>
			</view>
			<view class="photo-list">
				<view class="photo-item" v-for="(item,index) in photos" :key="index">
					<view class="upload">
						<image class="photo" :src="item" mode="" @tap="previewImage(item)"></image>
					</view>
				</view>
				<view class="photo-item" @click="choosePhoto"  v-show="zhshuid ? false : true">
					<view class="upload">
						<image class="upload-icon" src="@/static/user/upload_icon.png" mode=""></image>
					</view>
					<text>请上传证书照片</text>
				</view>
			</view>
		</view>
		<view class="submit" @click="onSubmit" v-show="zhshuid ? false : true">
			确认添加
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				type: 1,
				photos: [],
				zhshuid:false,
			};
		},
		onLoad(params) {
			this.zhshuid = params == '' ? false : params.zsid;
			if (this.zhshuid) {
				this.getZhengshuInfo()
			}
		},
		methods: {
			// 浏览图片
			previewImage(e){
				console.log(e)
				uni.previewImage({
					current: e,
					urls:this.photos
				})
			},
			// 获取证书详情
			getZhengshuInfo(){
				console.log('参数',this.zhshuid);
				this.request.http('/user/certificateEdit', 'post', {
					id: this.zhshuid,
				}).then(res => {
					let data = res.data
					console.log(data)
					if (data.code == 1) {
						console.log('图片',data.data.certificate_imges)
						this.form = data.data
						this.type = data.data.is_type
						this.photos = data.data.certificate_imges
						// let label = ''
						// switch (this.type) {
						// 	case 1:
						// 		label = '电工证'
						// 		break;
						// 	case 2:
						// 		label = '焊工证'
						// 		break;
						// 	case 3:
						// 		label = '安全员'
						// 		break;
						// 	case 4:
						// 		label = '施工员'
						// 		break;
						// 	case 5:
						// 		label = '其他'
						// 		break;
						// }
						// let pages = getCurrentPages();
						// let prevPage = pages[pages.length - 2];
						// prevPage.$vm.$refs.personage.certificateList.push({
						// 	id: data.data,
						// 	label: label
						// })
						// uni.navigateBack()
					}
				})
			},
			choosePhoto() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.upload.file('/Common/upload', res.tempFilePaths[0], 'file')
							.then(file => {
								uni.hideLoading()
								file = JSON.parse(file)
								if (file.code == 1) {
									this.photos.push(file.data.fullurl)
									uni.showToast({
										title: '上传成功'
									})
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									})
								}
							})
					}
				})
			},
			confirmLssuetime(e) {
				this.form.lssuetime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
			},
			confirmCutofftime(e) {
				this.form.cutofftime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
			},
			confirmReexaminetime(e) {
				this.form.reexaminetime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
			},
			onSubmit() {
				let form = this.form
				if (!form.org_name) {
					uni.showToast({
						icon: 'none',
						title: '请输入证书颁发机构'
					})
					return
				}
				if (!form.org_sn) {
					uni.showToast({
						icon: 'none',
						title: '请输入证书编号'
					})
					return
				}
				if (!form.lssuetime) {
					uni.showToast({
						icon: 'none',
						title: '请选择颁发日期'
					})
					return
				}
				if (!form.cutofftime) {
					uni.showToast({
						icon: 'none',
						title: '请选择有效截止日期'
					})
					return
				}
				if (this.photos.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请上传证书照片'
					})
					return
				}
				this.request.http('/user/certificateAdd', 'post', {
					org_name: form.org_name,
					org_sn: form.org_sn,
					lssuetime: form.lssuetime,
					cutofftime: form.cutofftime,
					reexaminetime: form.reexaminetime,
					is_type: this.type,
					certificate_imges: this.photos.join(','),
				}).then(res => {
					let data = res.data
					if (data.code == 1) {
						let label = ''
						switch (this.type) {
							case 1:
								label = '电工证'
								break;
							case 2:
								label = '焊工证'
								break;
							case 3:
								label = '安全员'
								break;
							case 4:
								label = '施工员'
								break;
							case 5:
								label = '其他'
								break;
						}
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2];
						prevPage.$vm.$refs.personage.certificateList.push({
							id: data.data,
							label: label
						})
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F7F9F9;
	}

	.certificate {
		padding: 28rpx 20rpx;

		.form {
			padding: 16rpx 25rpx;
			background-color: #fff;
			border-radius: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 27rpx;
			color: #313131;

			/deep/.u-form-item__body__left__content__label {
				font-size: 27rpx;
				color: #313131;
			}

			input {
				padding-right: 30rpx;
				font-weight: 400;
				font-size: 27rpx !important;
			}

			/deep/.u-form-item {
				position: relative;
			}

			.must {
				position: absolute;
				top: 28rpx;
				margin-left: -6rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 23rpx;
				color: #D55252;
			}
		}

		.type {
			margin-top: 16rpx;
			padding: 32rpx 25rpx;
			background-color: #fff;
			border-radius: 32rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 27rpx;
				color: #313131;
				display: flex;
				align-items: flex-start;

				.must {
					display: block;
					margin-left: 6rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 23rpx;
					color: #D55252;
					line-height: 33rpx;
				}
			}

			.type-list {
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.type-item {
					margin-right: 44rpx;
					margin-bottom: 16rpx;
					width: 187rpx;
					height: 75rpx;
					background: rgba(246, 247, 251, 0.73);
					border-radius: 19rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 27rpx;
					color: #333333;
					line-height: 75rpx;
					text-align: center;
					border: 1px solid rgba(246, 247, 251, 0.73);

					&:nth-child(3n) {
						margin-right: 0;
					}

					&.active {
						border: 1px solid #B0DD67;
					}
				}
			}

			.photo-list {
				margin-top: 28rpx;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;

				.photo-item {
					width: 200rpx;
					margin-right: 30rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}

					.upload {
						position: relative;
						width: 200rpx;
						height: 200rpx;
						background-color: #EBEBEB;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 8rpx;

						.upload-icon {
							width: 68rpx;
							height: 66rpx;
						}

						.photo {
							width: 100%;
							height: 100%;
						}
					}

					text {
						display: block;
						text-align: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;
						color: #999999;
					}
				}
			}
		}

		.submit {
			margin: 80rpx auto 0;
			width: 650rpx;
			height: 104rpx;
			background: #3D3D3D;
			border-radius: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 31rpx;
			color: #B0DD67;
			line-height: 104rpx;
			text-align: center;
		}
	}
</style>